<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<ui-code :code="code0"></ui-code><ui-br />

		<view class="page-title">设置多种样式类型</view><ui-br />

		<view class="page-tips">默认样式</view>
		<ct-tabs @click="getItem" name="name" :list="list" :selectTabs="selectTabs" keyName="name" /><ui-br />

		<view class="page-tips">设置<span class="span-code">scrollable</span>时开启滚动</view><ui-br />
		<ct-tabs @click="getItem" name="name" :list="list2" scrollable :selectTabs="1"
			backgroundColor="#f6f6f6" /><ui-br />

		<view class="page-tips">自定义样式</view><ui-br />
		<ct-tabs @click="getItem" name="name" :list="list2" scrollable :selectTabs="1" :tabsStyle="{
				'background-color':'#F6FAFB',
				'border-radius':'50rpx',
				'border':'1px solid #31C3B6'
			}" :lineStyle="{
				'height':'88rpx',
				'background-color':'#31C3B6',
				'width':'100%',
				'border-radius':'50rpx'
			}" :itemStyle="{'padding': '0 40rpx','color':'#333'}" :activeStyle="{'color':'#fff'}" />
		<ui-br />

		<view class="page-tips">自定义样式</view><ui-br />
		<ct-tabs @click="getItem" name="name" :list="list2" scrollable :itemStyle="{
				'border':'1px solid #808080',
				'padding':'14rpx',
				'margin':'0 12rpx',
				'font-size':'24rpx',
				'border-radius':'4rpx'
			}" :lineStyle="{}" :activeStyle="{'color':'#31B67A ','border':'1px solid #31B67A',}" />
		<ui-br />

		<ui-code :code="code1"></ui-code><ui-br />
		<view style="padding: 0 40rpx;" class="page-title">属性说明</view><ui-br />
		<ui-table :data="tableData" /><ui-br />
	</view>
	</view>
</template>

<script>
	import {
		code0,
		code1
	} from './code.js';
	export default {
		data() {
			return {
				list: [{
					name: "列表一"
				}, {
					name: "列表二"
				}, {
					name: "列表三"
				}, {
					name: "列表四"
				}],
				list2: [{
					name: "列表一"
				}, {
					name: "列表二"
				}, {
					name: "列表三"
				}, {
					name: "列表四"
				}, {
					name: "列表五"
				}, {
					name: "列表六"
				}, {
					name: "列表七"
				}],
				tableData: [{
						parameter: 'list',
						values: '[]/{} ([Obeject,Array])'
					}, {
						parameter: 'scrollable',
						values: 'true/false (是否开启横向滑动)'
					},
					{
						parameter: 'selectTabs',
						values: '0 ([Number,String]-初始化选择项)'
					}, {
						parameter: 'name',
						values: 'name (设置渲染名称的属性值)'
					},
					{
						parameter: 'keyName',
						values: '从list元素对象中读取的键名key值当做选中项'
					},
					{
						parameter: 'tabsStyle',
						values: '自定义tabs外围样式'
					},
					{
						parameter: 'lineStyle',
						values: '自定义滑块样式'
					},
					{
						parameter: 'itemStyle',
						values: '自定义每列样式'
					},
					{
						parameter: 'activeStyle',
						values: '自定义选中样式'
					},
					{
						parameter: 'tabsColor',
						values: '修改主题颜色(只对默认样式友好，自定义样式勿使用)'
					}, {
						parameter: '@click',
						values: '点击事件'
					}
				],
				code0: "",
				code1: "",
				selectTabs: "列表一"
			}
		},
		created() {
			this.code0 = code0
			this.code1 = code1


		},
		methods: {
			getItem(e) {

			}
		}
	}
</script>

<style lang="scss" scoped>
</style>